<template>
	<div class="page-wrapper">
		<el-card class="check-duplicate-container">
			<!-- 组合标题和按钮 -->
			<div class="header-container">
				<div class="header-left">
					<h2>查重页面</h2>
					<p class="sub-title">查重Demo</p>
				</div>
				<div class="header-right">
					<el-button type="primary" @click="goToLibraryManage">管理对比库文件</el-button>
				</div>
			</div>

			<el-form :model="form" label-width="120px" class="form-content">
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="标准名称">
							<el-select v-model="form.standardName" placeholder="请选择标准名称" filterable clearable>
								<el-option v-for="item in standardNameOptions" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="所属行业">
							<el-select v-model="form.industry" placeholder="请选择所属行业" filterable clearable>
								<el-option v-for="item in industryOptions" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>

				<el-form-item label="上传文件">
					<el-upload class="upload-demo" action="" :http-request="dummyRequest" :on-change="handleFileChange"
						:limit="1" :auto-upload="false">
						<el-button>选择文件</el-button>
						<div slot="tip" class="el-upload__tip">
							支持 .txt（优先）.pdf .word 等格式
						</div>
					</el-upload>
				</el-form-item>

				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="委托人姓名">
							<el-input v-model="form.clientName" placeholder="请输入委托人姓名" />
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="联系方式">
							<el-input v-model="form.clientPhone" placeholder="请输入联系方式" />
						</el-form-item>
					</el-col>
				</el-row>

				<el-form-item>
					<el-button type="primary" @click="submitCheck">提交并获取查重报告</el-button>
				</el-form-item>
			</el-form>

			<!-- 组件展示报告 -->
			<report-display v-if="results && results.length" :results="results" />
		</el-card>
	</div>
</template>

<script>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		ElMessage
	} from 'element-plus'
	import ReportDisplay from './ReportDisplay.vue'

	export default {
		name: "CheckDuplicate",
		components: {
			ReportDisplay
		},
		setup() {
			const form = reactive({
				standardName: '',
				industry: '',
				file: null,
				clientName: '',
				clientPhone: ''
			})
			const standardNameOptions = [{
					label: 'GB/T 100-2001 标准示例A',
					value: 'A'
				},
				{
					label: 'GB/T 101-2001 标准示例B',
					value: 'B'
				}
			]
			const industryOptions = [{
					label: '工业',
					value: 'industry1'
				},
				{
					label: '农业',
					value: 'industry2'
				},
				{
					label: '服务业',
					value: 'industry3'
				}
			]
			const results = ref(null)

			const dummyRequest = (options) => {
				options.onSuccess('uploaded', options.file)
			}
			const handleFileChange = (file) => {
				form.file = file.raw
			}
			// 简单的文件名提取函数
			const getFileName = (filePath) => {
				try {
					const parts = filePath.split('/')
					return parts[parts.length - 1]
				} catch (e) {
					return filePath
				}
			}
			const submitCheck = () => {
				if (!form.standardName || !form.industry || !form.file) {
					ElMessage.error('请填写完整信息并上传文件')
					return
				}
				uni.showLoading({
					title: '文件上传中',
					mask: true
				})
				uni.uploadFile({
					url: 'http://120.26.38.251/cat/v1/checkDiff/uploadFile',
					filePath: form.file.tempFilePath || '',
					name: 'file',
					formData: form,
					headers: {
						'Content-Type': 'multipart/form-data'
					},
					success: (uploadFileRes) => {
						uni.hideLoading()
						console.log(uploadFileRes)
						if (uploadFileRes.statusCode !== 200) {
							uni.showToast({
								title: '文件上传失败',
								icon: 'error'
							})
							return
						}
						let data = JSON.parse(uploadFileRes.data)
						if (data.code !== '200') {
							uni.showToast({
								title: data.message,
								icon: 'error'
							})
							return
						}
						// 接口返回结果为数组
						results.value = data.result
						ElMessage.success('查重报告获取成功！')
					},
					fail: (err) => {
						uni.hideLoading()
						uni.showToast({
							title: '文件上传失败',
							icon: 'error'
						})
						console.log('文件上传接口调用失败', err)
					}
				})
			}

			const goToLibraryManage = () => {
				uni.navigateTo({
					url: './LibraryManage'
				})
			}

			return {
				form,
				standardNameOptions,
				industryOptions,
				results,
				dummyRequest,
				handleFileChange,
				submitCheck,
				getFileName,
				goToLibraryManage
			}
		}
	}
</script>

<style scoped>
	.page-wrapper {
		background-color: #f5f7fa;
		min-height: 100vh;
		padding: 30px 0;
	}

	.check-duplicate-container {
		max-width: 800px;
		margin: 0 auto;
		padding: 20px;
		background-color: #fff;
	}

	.header-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
	}

	.header-left h2 {
		margin: 0;
		font-size: 22px;
		font-weight: bold;
	}

	.sub-title {
		margin: 5px 0 0;
		color: #666;
		font-size: 14px;
	}

	.header-right {
		/* 可根据需要调整按钮样式 */
	}

	.upload-demo {
		display: block;
	}

	.el-upload__tip {
		color: #999;
		font-size: 12px;
		line-height: 1.5;
		margin-top: 5px;
		margin-left: 15px;
	}
</style>